.o-tooltip {
  @include reset-text();
  @include font-size($tooltip-font-size);

  // Note: Not cross-browser but not such a big deal since it's
  // needed for minor aesthetic adaptations only.
  &:has(.o-tooltip--technical) {
    max-width: $tooltip-max-width * 2;

    .o-tooltip--help {
      background-color: $info;
      color: lightblue;
    }

    .o-tooltip--string, .o-tooltip--help {
      max-width: MIN($tooltip-max-width, 100%);
    }
  }

  .o-tooltip--string, .o-tooltip--technical--title {
    padding: map-get($spacers, 1) 0;
    color: black;
    font-weight: $font-weight-bold;
  }

  .o-tooltip--help, .o-tooltip--technical {
    margin: map-get($spacers, 1) map-get($spacers, 2) map-get($spacers, 2);
  }

  .o-tooltip--help {
    white-space: pre-line;
    padding: 0 map-get($spacers, 2);
  }

  .o-tooltip--technical {
    padding-left: 1.3em;
    font-family: $o-font-family-monospace;
    font-size: $o-font-size-base-smaller;
    list-style-type: disc;

    .o-tooltip--technical--title {
      margin-right: map-get($spacers, 1);
    }
  }

  + .popover-arrow {
    --popover-arrow-color: #{$tooltip-arrow-color};
  }
}
